<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>花名册</title>
        <style>
            *{
                margin:0 auto;
                padding: 0;
            }
            img{
                border:0 none;
            }
            #table{
                width:50%;
                border:1px solid #efefef;
                border-collapse: collapse;
                line-height: 30px;
                margin: 0 auto}
            .td {
                width: 100px;
                height: 30px;
                font-size: 20px;
                border:1px solid #efefef;
                text-align: center;
            }
            .over {
                background-color: #d6d6d6
            }
        </style>
        <script src = '../work/jquery-1.12.4.min.js'></script>
        <script>
            //数据
            var students = [
                {name:"张三",sex:0,age:"21",img:"../img/ad1.jpg"},
                {name:"李四",sex:1,age:"22",img:"../img/ad2.jpg"},
                {name:"王五",sex:0,age:"23",img:"../img/ad3.jpg"},
                {name:"赵六",sex:1,age:"24",img:"../img/ad4.jpg"}
            ];
            jQuery(function($) {
                //body的jq对象
                var $body  = $('body');
                //表标题
                $('<p></p>').appendTo($body).css({textAlign:'center',margin:'10px auto',fontWeight:'bold'}).text('花名册');
                //表格
                var $table =$('<table id = "table"></table>').appendTo($body);
                //表格头
                var _tr = $('<tr></tr>').appendTo('table').css({backgroundColor:'#C9C9C9'});
                $('<th></th>').appendTo(_tr).html('<input id = "chkAll" type = "checkbox" />').css({width:'10%'});
                $('<th></th>').appendTo(_tr).text('名称').css({width:'35%'});
                $('<th></th>').appendTo(_tr).text('性别').css({width:'25%'});
                $('<th></th>').appendTo(_tr).text('年龄').css({width:'15%'});
                $('<th></th>').appendTo(_tr).text('照片').css({width:'15%'});
                //表格内容
                for (var i= 0;i<students.length;i++){
                    var $tr = $('<tr></tr>').appendTo($table);
                    $('<td class="td"></td>').appendTo($tr).html('<input type="checkbox" />');
                    $('<td class="td"></td>').appendTo($tr).text(students[i]['name']);
                    $('<td class="td"></td>').appendTo($tr).text(students[i]['sex']?'男':'女');
                    $('<td class="td"></td>').appendTo($tr).text(students[i]['age']);
                    $('<td class="td"></td>').appendTo($tr).text('查看');
                }
                //全选
                $('#chkAll').click(function () {
                   $(':checkbox:gt(0)','#table').prop({checked:this.checked});
                });
                //鼠标样式
                var tr_all =  $('tr:gt(0)','#table');
                tr_all.mouseover(function () {
                    tr_all.removeClass('over');
                    $(this).addClass('over');
                });
                tr_all.mouseout(function () {
                    tr_all.removeClass('over');
                });

            });






        </script>
    </head>
    <body>
    </body>
</html>